<template>
  <el-card class="box-card">
    <template #header>
      <span>患者打卡率</span>
    </template>
    <div ref="chartRef" :style="{ width: width, height: height }"></div>
  </el-card>
</template>
<script lang="ts" setup>
  import { onMounted, Ref, ref, watch } from 'vue'
  import { useECharts } from '@/hooks/web/useECharts'
  import type { EChartsOption } from 'echarts'

  const animationDuration = 300
  const chartRef = ref<HTMLDivElement | null>(null)
  const { setOptions, getInstance } = useECharts(
    chartRef as Ref<HTMLDivElement>,
    'macarons'
  )

  const props = defineProps({
    data: {
      type: Object,
      default() {
        return {}
      },
    },
    width: {
      // eslint-disable-next-line no-undef
      type: String as PropType<string>,
      default: '100%',
    },
    height: {
      // eslint-disable-next-line no-undef
      type: String as PropType<string>,
      default: '300px',
    },
    customStyle: {
      // '' :'shadow'
      type: Object,
      default() {
        return {
          isBarShadow: null,
          axisLabelColor: 'gray',
        }
      },
    },
    customConfig: {
      type: Object,
      default: {
        formatterUnit: null,
      },
    },
  })

  watch(
    () => props.data,
    () => {
      if (props.data) {
        const { legendData, data } = props.data
        const { isBarShadow, axisLabelColor } = props.customStyle
        console.log('axisLabelColor =' + axisLabelColor)
        const { formatterUnit } = props.customStyle
        const seriesDataTmp = {
          tooltip: {
            trigger: 'item',
            backgroundColor: 'rgba(255,255,255,0.8)',
            axisPointer: {
              type: 'shadow',
            },
            formatter: (params: any) => {
              return (
                params.name +
                '<br/>' +
                params.marker +
                ' ' +
                params.data.name +
                ' 共' +
                params.data.value +
                formatterUnit
              )
            },
            // formatter: '{a} <br/>{b} : {c}%'
          },
          // 示例的样式
          legend: {
            show: false,
            data: legendData,
            textStyle: {
              color: 'white',
            },
          },
          series: [
            {
              name: '漏斗图',
              type: 'funnel',
              left: '10%',
              top: 20,
              bottom: 20,
              width: '80%',
              // height: '80%',
              sort: 'descending',
              gap: 2,
              label: {
                show: true,
                position: 'inside',
              },
              labelLine: {
                length: 10,
                lineStyle: {
                  width: 1,
                  type: 'solid',
                },
              },
              itemStyle: {
                borderColor: '#fff',
                borderWidth: 1,
              },
              // 鼠标在上面时的样式
              emphasis: {
                label: {
                  fontSize: 20,
                },
              },
              data: data,
            },
          ],
        }
        setOptions(seriesDataTmp as EChartsOption)
      }
    },
    { immediate: true }
  )
  onMounted(() => {
    const myChart = getInstance()
    console.log('myChart =' + myChart)
    myChart?.on('click', function (params) {
      const { data, dataIndex } = params
      console.log('data =' + JSON.stringify(data))
      console.log('dataIndex =' + JSON.stringify(dataIndex))
    })
  })
</script>
<style lang="scss" scoped>
  .box-card {
    // width: 50%;
    margin-bottom: 22px;
  }
</style>
